<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue_dom.html</title>
</head>
<body>
    Vue2:
    <h1 id="h1">1</h1>
    <button onclick="add()">点击后数字++</button>
    <hr>
    Vue3:
    <h2 id="h2">10</h2>
    <button onclick="addv3()">点击后数字++</button>

    <script>
    // ---------------------------------------------------
    // 模拟vue3的data中数据声明语法，通过count来控制页面显示
    var v3data = { count:10 }
    // ES6新特性提供了Proxy方便的创建对象的代理对象
    // 这时如果需要对对象进行数据操作（访问属性、修改属性等）
    // 那么就可以直接操作代理对象，代理对象在完成本职任务的过程
    // 中，还可以让程序要在数据操作的间隙偷摸干点xxxx事情
    var v3dataProxy = new Proxy(v3data, {
        // 当用户设置v3data属性时，自动调用
        set(obj, key, value){
            //参数1：当前代理的目标对象
            //参数2：要赋值的属性名
            //参数3：为属性赋的值
            obj[key] = value //先做本职工作 为目标对象属性赋值
            h2.innerHTML = value
        },
        // 当用户访问v3data属性时，自动调用
        get(obj, key){
            return obj[key]
        }
    })
    function addv3(){
        v3dataProxy.count++
    }




    // ---------------------------------------------------
    // 模拟vue2的data中数据的声明语法，通过num来控制页面显示
    var data = { num : 1 }

    // vue2的方式，监听data对象，一旦data对象中属性变化，更新UI
    Object.defineProperties(data, {
        _num: {value:1, writable:true},
        num: {
            // 如果访问num属性：将执行get方法
            get(){ return this._num },
            // 如果修改num属性值：将执行set方法
            set(value){  //data.num=5  value就是5
                this._num = value
                // vue需要找到页面中所有使用了该变量的地方
                // 在此做DOM操作更新UI
                h1.innerHTML = value
            }
        }
    })

    function add(){
        // 避免操作DOM 直接修改data.num属性 实时更新UI
        data.num++
    }
    </script>
</body>
</html>